{extend name="/base"}

{block name="header"}
<div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm layui-btn-danger" id="listDelete">删除</button>
    <a href="{:url('add')}" class="layui-btn layui-btn-sm">添加</a>
</div>
{/block}

{block name="body"}
<table id="dataTable" lay-filter="dataTable"></table>
<script type="text/html" id="options">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm " lay-event="del">删除</a>
    </div>
</script>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '__STATIC__/layuiadmin/modules/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'form', 'treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        var dataTable = function () {
            treetable.render({
                treeColIndex: 1,          // treetable新增参数
                treeSpid: 0,             // treetable新增参数
                treeIdName: 'id',       // treetable新增参数
                treePidName: 'parent_id',     // treetable新增参数
                treeDefaultClose: false,   // treetable新增参数
                treeLinkage: false,        // treetable新增参数
                elem: '#dataTable',
                url: "{:url('permission/index')}",
                cols: [[
                    {field: 'id', title: 'ID', sort: true, width: 80 }
                    , {field: 'name', title: '名称'}
                    , {field: 'description', title: '描述'}
                    , {field: 'icon', title: '图标',templet:function (d) {
                            return '<i class="layui-icon '+d.icon+'"></i>';
                        }}
                    , {field: 'url', title: '路由'}
                    , {field: 'type', title: '类型',templet:function (d) {
                            return d.type==1?'<font color="#01AAED">菜单</font>':'<font color="#FFB800">按钮</font>';
                        }}
                    , {field: 'create_time', title: '创建时间'}
                    , {fixed: 'right', width: 260, align: 'center', toolbar: '#options'}
                ]]
            });
        };
        dataTable(); //调用此函数可重新渲染表格

        //监听工具条
        table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确认删除吗？', function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{:url('del')}", {id: data.id}, function (res) {
                        layer.close(load);
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                obj.del();
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500})
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                location.href = '{:url("edit")}' + '&id=' + data.id;
            }
        });
    })
</script>
{/block}